<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增api服务')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-server-add">
        
        	<h4 class="form-header h4">基本设置</h4>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>服务名称：</label>
				<div class="col-sm-8">
					<input id="serverName" name="serverName" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>服务编号：</label>
				<div class="col-sm-8">
					<input id="serverCode" name="serverCode" class="form-control" type="text" required>
				</div>
			</div>
<!-- 			<div class="form-group">	 -->
<!-- 				<label class="col-sm-3 control-label">服务地址头：</label> -->
<!-- 				<div class="col-sm-8"> -->
<!-- 					<input id="serverHead" name="serverHead" class="form-control" type="text"> -->
<!-- 				</div> -->
<!-- 			</div> -->
<!-- 			<div class="form-group">	 -->
<!-- 				<label class="col-sm-3 control-label">服务域名/ip：</label> -->
<!-- 				<div class="col-sm-8"> -->
<!-- 					<input id="serverDomain" name="serverDomain" class="form-control" type="text"> -->
<!-- 				</div> -->
<!-- 			</div> -->
<!-- 			<div class="form-group">	 -->
<!-- 				<label class="col-sm-3 control-label">服务地址访问后缀：</label> -->
<!-- 				<div class="col-sm-8"> -->
<!-- 					<input id="serverSuffix" name="serverSuffix" class="form-control" type="text"> -->
<!-- 				</div> -->
<!-- 			</div> -->
			
			
<!-- 			<div class="form-group">	 -->
<!-- 				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>服务访问地址：</label> -->
<!-- 				<div class="col-sm-8"> -->
<!-- 					<input id="serverUrl" name="serverUrl" class="form-control" type="text" required> -->
<!-- 				</div> -->
<!-- 			</div> -->
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>域名/IP：</label>
				<div class="col-sm-8">
					<input id="serverDomain" name="serverDomain" class="form-control" type="text" required placeholder="例如：http://127.0.0.1">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>端口：</label>
				<div class="col-sm-8">
					<input id="serverPort" name="serverPort" class="form-control" type="number" required value="80">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">访问后缀：</label>
				<div class="col-sm-8">
					<input id="serverSuffix" name="serverSuffix" class="form-control" type="text" placeholder="可为空，不为空时需以 / 开头">
				</div>
			</div>
			
			<div class="form-group">	
				<label class="col-sm-3 control-label">服务器权重(用于多服务器负载均衡)：</label>
				<div class="col-sm-8">
					<input id="serverWeight" name="serverWeight" class="form-control" type="number" placeholder="用于多服务器负载均衡" value="1" required>
				</div>
			</div>
			
			<div class="form-group">	
				<label class="col-sm-3 control-label">服务器组：</label>
				<div class="col-sm-8">
					<select id="serverGroup" name="serverGroup" class="form-control">
						<option value="" selected>默认分组</option>
						<option th:each="group:${groups}" th:value="${group.serverGroupId}" th:text="${group.serverGroupName}">自动检查</option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
			
			<h4 class="form-header h4">可用性检查设置</h4>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>服务可用性检查方式：</label>
				<div class="col-sm-8">
					<select id="serverAutoCheck" name="serverAutoCheck" class="form-control" required>
						<option value="">请选择</option>
						<option value="false">手动检查</option>
						<option value="true">自动检查</option>
					</select>
				</div>
			</div>
			
			<div id="choseServerAutoCheck">
			</div>
			
		</form>
	</div>
    <div th:include="include::footer"></div>
    
    <!-- 选择手动检查时的html -->
    <script type="html" id="notAutoDiv">
		<div class="form-group">	
			<label class="col-sm-3 control-label"><span style="color: red; ">*</span>服务是否可用：</label>
			<div class="col-sm-8">
				<select id="serverLive" name="serverLive" class="form-control" required>
					<option value="true" selected>可用</option>
					<option value="false">失效</option>
				</select>
			</div>
		</div>
	</script>
	<!-- 选择自动检查时的html -->
    <script type="html" id="autoDiv">
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>自动检查周期(分钟)：</label>
				<div class="col-sm-8">
					<input id="checkCycleMinute" name="checkCycleMinute" class="form-control" type="number" value="5" required>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>服务检查地址：</label>
				<div class="col-sm-8">
					<input id="serverCheckUrl" name="serverCheckUrl" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>数据校验类型：</label>
				<div class="col-sm-8">
					<select id="checkResultType" name="checkResultType" class="form-control" required>
						<option value="">请选择</option>						
						<option value="string">字符串</option>
						<option value="json">json</option>
					</select>
				</div>
			</div>
			<div id="checkResultTypeDiv">
			</div>
	</script>
	
	<script type="html" id="stringDiv">
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>校验方式(字符串)：</label>
				<div class="col-sm-8">
					<select id="checkType" name="checkType" class="form-control" required>
						<option value="contain" selected>包含字符</option>
						<option value="notContain">不包含字符</option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>匹配值：</label>
				<div class="col-sm-8">
					<input id="checkValue" name="checkValue" class="form-control" type="text" required>
				</div>
			</div>	
	</script>
	
	<script type="html" id="jsonDiv">
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>json键：</label>
				<div class="col-sm-8">
					<input id="checkJsonKey" name="checkJsonKey" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>校验方式(json)：</label>
				<div class="col-sm-8">
					<select id="checkType" name="checkType" class="form-control" required>
						<option value="contain" selected>等于</option>
						<option value="notContain">不等于</option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label"><span style="color: red; ">*</span>匹配值：</label>
				<div class="col-sm-8">
					<input id="checkValue" name="checkValue" class="form-control" type="text" required>
				</div>
			</div>	
	</script>
    
    <script type="text/javascript">
		var prefix = ctx + "api/server"
		$("#form-server-add").validate({
			rules:{
				serverName:{
					required:true,
					remote: {
                        url: prefix + "/checkNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                        	serverName : function() {
                                return $.common.trim($("#serverName").val());
                            }
                        },
                        dataFilter: function(data, type) {
                        	return $.validate.unique(data);
                        }
                    }
				},
				serverCode:{
					required:true,
					remote: {
                        url: prefix + "/checkCodeUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                        	serverGroupName : function() {
                                return $.common.trim($("#serverCode").val());
                            }
                        },
                        dataFilter: function(data, type) {
                        	return $.validate.unique(data);
                        }
                    }
				},
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-server-add').serialize());
	        }
	    }
		
		$(document).on("change","#serverAutoCheck",function(){  
			if($("#serverAutoCheck").val()=='false'){
				$("#choseServerAutoCheck").html($("#notAutoDiv").html());
			}else if($("#serverAutoCheck").val()=='true'){
				$("#choseServerAutoCheck").html($("#autoDiv").html());
			}else{
				$("#choseServerAutoCheck").html("");
			}
	    });
		
		 $(document).on("change","#checkResultType",function(){  
			if($("#checkResultType").val()=='string'){
				$("#checkResultTypeDiv").html($("#stringDiv").html());
			}else if($("#checkResultType").val()=='json'){
				$("#checkResultTypeDiv").html($("#jsonDiv").html());
			}else{
				$("#checkResultTypeDiv").html("");
			}
	    });
		
	</script>
</body>
</html>
